<!-- Layout -->
<template>
  <el-container class="layoutWarp">
    <el-aside width="auto">
      <LayoutAside />
    </el-aside>
    <el-container>
      <el-header>
        <LayoutHeader />
        <transition name="slide-fade" mode="in-out">
          <LayoutPageBar v-show="pageBarShow" />
        </transition>
      </el-header>
      <el-scrollbar style="height: 100%">
        <el-main>
          <transition name="fade-transform" mode="out-in">
            <keep-alive :include="cachePages">
              <router-view v-if="isRouterAlive"></router-view>
            </keep-alive>
          </transition>
        </el-main>
      </el-scrollbar>
    </el-container>
  </el-container>
</template>

<script>
import { mapState } from "vuex";
import variables from "@/assets/css/variables.scss";
import LayoutAside from "./components/LayoutAside/index";
import LayoutHeader from "./components/LayoutHeader";
import LayoutPageBar from "./components/LayoutPageBar";
export default {
  name: "LayoutWarp",
  provide() {
    return {
      reload: this.reload,
    };
  },
  components: {
    LayoutAside,
    LayoutHeader,
    LayoutPageBar,
  },
  data() {
    return {
      isRouterAlive: true,
    };
  },
  computed: {
    ...mapState("Layout", ["pageBarShow", "cachePages"]),
    variables() {
      return variables;
    },
  },
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
.layoutWarp {
  height: 100%;
  .el-aside {
    background: $ThemeBg;
  }
  .el-header {
    background: $ThemeBg;
    height: auto !important;
  }
}
// .xxx-enter{ } 进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；(运动的初始状态)
// .xxx-enter-active{ } 进入过渡的结束状态，元素被插入时就生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
// .xxx-leave{ } 离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；
// .xxx-leave-active{ } 离开过渡的结束状态，元素被删除时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

// pageBar
.slide-fade-leave-active,
.slide-fade-enter-active {
  height: 29px;
  transition: all 0.2s;
}

.slide-fade-enter {
  height: 0px;
}

.slide-fade-leave-to {
  height: 0px;
}

// main
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.3s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
